import React from 'react'
import uuid from 'uuid'
import * as FormUtil from '../../../public/js/formUtil'
import * as AlertUtil from '../../../public/js/alertUtil'
import DataTable from '../../../share/DataTable'
import SetPermission from './SetPermission'
import SetMenu from './SetMenu'
import { initTable , buttonEdit, buttonAdd,checkRight,buttonDelete } from '../../../public/js/public'


export default class extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tableId : uuid.v4(),
            toolbarId : uuid.v4(),
            modalId: uuid.v4(),
            setMenuModalId: uuid.v4(),
            roleId: -1,
            menuRoleId:-1
        }
    }

    setPermission() {
        if(checkRight('back:role:permission:set')) {
            return '<a type="button" href="javascript:void(0);" class="btn btn-xs waves-effect waves-light btn-info setPermission">分配权限</a>'
        }
    }

    setMenu() {
        if(checkRight('back:menu:set2role')) {
            return '<a type="button" href="javascript:void(0);" class="btn btn-xs waves-effect waves-light btn-success setMenu">分配菜单</a>'
        }
    }

    renderSetPermission() {
        if(checkRight('back:role:permission:set')) {
            return (<div><SetPermission modalId = {this.state.modalId} roleId = {this.state.roleId} /></div>)
        }
    }

    initTable() {
        let that = this, columns = [{
            title: 'ID',
            data: 'id'
        },{
            title: 'Code',
            data: 'code'
        },{
            title :'角色名',
            data: 'name'
        }, {
            title : '操作',
            events : {
                'click .update' : (e, value, row) => {
                    let history = that.props.history
                    history.push('/system/role/edit/' + row['id'])
                },
                'click .remove' : (e, value, row) => {
                    AlertUtil.confirm('删除提示','确定要删除该角色吗？！',()=>{
                        let url = domainName + "/roles/delete/" + row.id, data = {}
                        FormUtil.getData(url, data, (response)=>{
                            AlertUtil.alert('提示','删除成功!',()=>{
                                $('#' + that.state.tableId).DataTable().ajax.reload()
                            });
                            
                        })
                    })
                },

                'click .setPermission': (e, value, row) => {
                    that.setState({
                        roleId: row.id
                    },()=>{
                        $('#' + that.state.modalId).modal('show')
                    })
                    
                },

                'click .setMenu': (e, value, row) => {
                    that.setState({
                        menuRoleId: row.id
                    },()=>{
                        $('#' + that.state.setMenuModalId).modal('show')
                    })
                }
            },
            render(data, type, row, meta) {
                let edit = buttonEdit('back:user:update'),resetPwd = '',html = [],
                    deleteButton = buttonDelete('back:role:delete'), setPermission = that.setPermission(),
                    setMenu = that.setMenu()
                html.push('<div class="button-group">')
                html.push(edit)
                html.push(deleteButton)
                html.push(setPermission)
                html.push(setMenu)
                html.push('</div>')
                return html.join('')
            }
        }]

        const tableConfig = {
            columns:columns,
            ajax: domainName + "/roles",
        }
        initTable({
            toolbarId :this.state.toolbarId,
            tableId: this.state.tableId,
            buttons : []
        },tableConfig)
    }

    componentDidMount() {
        this.initTable()
    }

    renderSetMenu() {
        if(checkRight('back:menu:set2role')) {
            return (<div><SetMenu modalId={this.state.setMenuModalId} roleId = {this.state.menuRoleId}/></div>)
        }
    }

    render() {
        return (
            <div>
                {this.renderSetMenu()}
                {this.renderSetPermission()}
                <DataTable>
                    <div id={this.state.toolbarId}>
                       {buttonAdd('back:role:save', '#/system/role/edit/')}
                    </div>
                    <table id={this.state.tableId} className="table table-striped table-bordered display"></table>
                </DataTable>
            </div>
        )
    }
}